<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="d" uri="http://dgg.net/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%--证书预约页面--%>
<form id="myForm">
<div class="body-main">
    <%--生产订单ID--%>
    <input type="hidden" name="scOrderId" value="${scOrderId}">
    <div class="finan-panel myFormClass">
        <div class="finan-tit">
            <b>需预约证书</b>
        </div>
        <div class="panel-main">
            <table class="add-table form-table">
                <tbody>
                <tr>
                    <th><span class="required">证书类型：</span></th>
                    <td>
                        <select class="select-style" name="certificateTypeHigh" id="certificateTypeHigh"
                                onchange="loadCertificateType('240px','#certificateTypeHigh','${generalType}',1,'#certificateSpecialtysHigh',0,'#certificateLevelHigh')">
                            <option value="">请选择</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><span class="required">证书专业：</span></th>
                    <td>
                        <select class="select-style" name="certificateSpecialtysHigh" id="certificateSpecialtysHigh" onchange="checkCertificateSpecialty('#certificateTypeHigh','#certificateSpecialtysHigh')">
                            <option value="">请先选择证书类型</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><span class="required">证书等级：</span></th>
                    <td>
                        <select class="select-style" name="certificateLevelHigh" id="certificateLevelHigh">
                            <option value="">请先选择证书类型</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><span class="required">应用范围：</span></th>
                    <td>
                        <select class="table-select" name="applicationScopesHigh" id="applicationScopesHigh">
                            <option value="">请选择</option>
                            <c:forEach var="p" items="${applicationScopes}">
                                <option value="${p.code}">${p.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                <th><span class="required">地区</span></th>
                <td>
                    <div class="bus-plugIn" id="certificateArea">
                        <input type="hidden" name="certificateAreaId" class="plug-in-msg"/>
                        <input type="hidden" name="certificateArea" id="appointmentAreaId" class="plug-in-code"/>
                        <input type="text" readonly placeholder="请选择" class="chose-plugIn layui-input" name="areaName" >
                        <div class="bus-picker">
                            <div class="bus-picker-tab">
                                <a href="javascript:void(0);" class="active">请选择</a>
                            </div>
                            <div class="bus-picker-content"></div>
                        </div>
                    </div>
                </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <button class="layui-btn layui-btn-mini layui-btn-normal" type="button" onclick="appointmentCertificate('${scOrderId}')">确认预约</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="finan-panel">
        <div class="finan-tit">
            <b>已预约证书</b>
        </div>
        <div class="dataTables_wrapper no-footer">
            <table class="cell-border crm-table" id="appoinmentTableId">
                <thead>
                <tr>
                    <th>证书类型</th>
                    <th>证书专业</th>
                    <th>证书等级</th>
                    <th>应用范围</th>
                    <th>地区</th>
                    <th>是否购买社保</th>
                    <th>社保区域</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</form>
<script type="text/javascript">
    var appoinmentTable;
    $(document).ready(function () {
        //初始化证书类型
        loadCertificateType('240px','#certificateTypeHigh', '${generalType}', 0);
        //异步加载
        Plug.plug_ins(
            "get",
            "${cmsBaseUrl}/api/cms/tree_book/v1/get_tree_book_list.do?code=2147483647&type=2&level=1",
            "#certificateArea",
            '请选择地区',
            function () {
            },
            true, '2147483647'
        );
        appoinmentTable = $('#appoinmentTableId').dataTableExtend({
            "ajax": {
                "url": "${basePath}/zzsc/inprocess/certificate_appointment_data.do",
                "type": "post"
            },
            "fnServerParams": function (aoData) {
                aoData = $.extend(aoData, getSearchData());
                return aoData;
            },
            "scrollX": "false",//是否开启横项滚动
            "aoColumns": [
                {//证书类型
                    "orderable": false,
                    "data": "certificateTypeId"
                },  {//证书专业
                    "orderable": false,
                    "data": "certificateMajorId"
                },  {//证书等级
                    "orderable": false,
                    "data": "certificateLevel"
                },  {//证书范围
                    "orderable": false,
                    "data": "applicationScope"
                },  {//证书区域
                    "orderable": false,
                    "data": "certificateArea"
                },  {//是否购买社保
                    "data": "socialSecurity",
                    "render": function (data, type, full, meta) {
                        return data == null ? '' : (data == 0 ? '是' : '否');
                    },
                    "orderable": false
                },  {//社保区域
                    "data": "socialSecurityAreaChange",
                    "render": function (data, type, full, meta) {
                        return data == null ? '' : data;
                    },
                    "orderable": false
                }, {
                    "orderable": false,
                    "data": "id",
                    "width": "190",
                    "render": function (d, type, r, meta) {
                        var result = "";
                        result +='<a href=\'javascript:void(0)\'   onclick="cancelAppointment(\'' + r.scProductId + '\',\'' + r.id + '\',1,1)" ><span class="layui-table-link">' + '取消预约' + '</span></a>';
                        return result;
                    }
                }]
        });

    });
    function getSearchData() {
        return $("#myForm").serializeObject();
    }
</script>

